<!-- 巡查待办--组件 -->
<template>
  <view class="inspection-todos">
    <view class="header">
      <view class="label-title-content">
        <image class="icon" src="../../../../static/images/xuncha.png" />
        <p class="text-label">巡查待办</p>
      </view>
      <text class="view-all" @click="showUnderDevelopment">查看全部 &gt;</text>
    </view>
    <view class="task-list">
      <view
        v-for="(task, index) in tasks"
        :key="index"
        class="task-item"
        @click="showUnderDevelopment"
      >
        <!-- 状态标签 (右上角) -->
        <text :class="['status-label-right', `status-label-${task.status}`]">
          {{ task.statusLabel }}
        </text>

        <view class="task-content">
          <text class="task-title">{{ task.title }}</text>
          <view class="task-meta">
            <text class="timestamp">巡查时间：{{ task.timestamp }}</text>
            <!-- 超时标签 (中间) -->
            <view v-if="task.expired" class="expired-label">
              <text class="expired-text">超时</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';

interface Task {
  title: string;
  status: string;
  statusLabel: string;
  timestamp: string;
  expired: boolean;
}

interface Props {
  tasks?: Task[];
}

const props = defineProps({
  tasks: {
    type: Array,
    default: () => [
      {
        title: '海宇道、临开西路交口巡查任务',
        status: 'pending',
        statusLabel: '待指派',
        timestamp: '2025/12/12',
        expired: true,
      },
      {
        title: '3号楼消防设施检查',
        status: 'completed',
        statusLabel: '已指派',
        timestamp: '2025/12/11',
        expired: false,
      },
      {
        title: '小区绿化带维护检查',
        status: 'completed',
        statusLabel: '已指派',
        timestamp: '2025/12/10',
        expired: false,
      },
    ],
  },
});

// 显示"正在开发中"的提示
const showUnderDevelopment = () => {
  uni.showModal({
    title: '提示',
    content: '该功能正在开发中，敬请期待',
    showCancel: false,
    confirmText: '我知道了',
  });
};
</script>

<style lang="scss" scoped>
/* 原有样式保持不变 */
.inspection-todos {
  padding: 20rpx;
  border-radius: 10rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rpx 28.5rpx 28.5rpx 28.5rpx;
}

.label-title-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.icon {
  width: 38rpx;
  height: 38rpx;
}

.text-label {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 29rpx;
  color: #000000;
  line-height: 42rpx;
  text-align: right;
  font-style: normal;
  margin-left: 25rpx;
}

.view-all {
  cursor: pointer;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 23rpx;
  color: #2263bf;
  line-height: 33rpx;
  text-align: right;
  font-style: normal;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 25rpx;
}

.task-item {
  position: relative;
  padding: 25rpx;
  background-color: #fff;
  border-radius: 12rpx;
  height: 173rpx;
}

.task-content {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.task-title {
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
}

.task-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
}

.timestamp {
  font-size: 24rpx;
  color: #999;
}

.status-label-right {
  position: absolute;
  top: 0rpx;
  right: 20rpx;
  width: 106rpx;
  height: 38rpx;
  background: #e2e1ff;
  border-radius: 0rpx 0rpx 8rpx 8rpx;
  color: white;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 23rpx;
  line-height: 33rpx;
  font-style: normal;
  text-align: center;

  &-pending {
    background-color: #e2e1ff;
    color: #9053ff;
  }

  &-completed {
    background: #c5f1e6;
    color: #39aa92;
  }
}

.expired-label {
  display: flex;
  align-items: center;
  height: 38rpx;
  background: #ffe6e6;
  border-radius: 8rpx;
  border: 2rpx solid rgba(255, 47, 47, 0.32);
  padding: 6rpx 16rpx;
  font-size: 22rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #ff2121;
  line-height: 33rpx;
  font-style: normal;
}
</style>
